<template>
  <div class="articles-wrapper">
    <el-card shadow="always">
      <div class="box-card">
        <div class="search-wrap">
          <div class="ipt-wrap">
            <div class="label">关键字</div>
            <el-input v-model="keyword" size="small"></el-input>
          </div>
          <div class="ipt-wrap">
            <div class="label">状态</div>
            <el-select v-model="status" placeholder="请选择" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <el-button style="margin-left: 10px;" size="small" @click="onClear">清除</el-button>
          <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
        </div>
        <el-button type="success" icon="el-icon-edit" size="small" @click="createArticle">新增技巧</el-button>
      </div>
      <el-alert
        class="total"
        :title=" '数据一共' + (articlesData.counts ? articlesData.counts : 0) +'条'"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <div>
        <el-table :data="articlesData.items" stripe style="width: 100%">
          <el-table-column label="序号" width="60" type="index"></el-table-column>
          <el-table-column label="文章标题" min-width="400">
            <template slot-scope="scope">
              <div>
                <span>{{scope.row.title}}</span>
                <i
                  class="film-icon el-icon-film"
                  v-if="scope.row.videoURL"
                  @click="playVideo(scope.row.videoURL)"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" min-width="100"></el-table-column>
          <el-table-column prop="username" label="录入人" min-width="110"></el-table-column>
          <el-table-column prop="createTime" label="录入时间" min-width="100">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | formatTimes}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="80">
            <template slot-scope="scope">
              <span>{{scope.row.state === 0 ? '已禁用' : '已开启'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="180">
            <template slot-scope="scope">
              <div class="controls">
                <span @click="onPreview(scope.row)">预览</span>
                <span @click="onChangeState(scope.row)">{{scope.row.state === 0 ? '启用' : '禁用'}}</span>
                <span :class="{disabled: scope.row.state === 1}" @click="onEdit(scope.row)">修改</span>
                <span :class="{disabled: scope.row.state === 1}" @click="onDelete(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrap">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="articlesData.counts"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @size-change="sizeChange"
          @current-change="currentChange"
          @prev-click="currentChange"
          @next-click="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="预览文章"
      width="800px"
      :visible.sync="showDetailPreview"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <ArticlesPreview ref="articlePre" :detailId="detailId" />
    </el-dialog>
    <el-dialog
      :title="isEdit ? '修改文章' : '新增文章'"
      width="800px"
      :visible.sync="showAddPreview"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <ArticlesAdd
        ref="articleAdd"
        v-model="isEdit"
        :visible.sync="showAddPreview"
        :articleData="articleData"
        @refreshData="refreshData"
      />
    </el-dialog>
    <div class="video-panel" v-if="isShowVideo">
      <div class="close-btn-wrap">
        <div class="el-icon-close close-btn" @click="onCloseVideo"></div>
      </div>
      <div class="video-wrap">
        <video ref="video" width="600" height="400" :src="videoURL" controls></video>
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from "@/api/hmmm/articles.js";
import ArticlesPreview from "../components/articles-preview";
import ArticlesAdd from "../components/articles-add";
export default {
  components: {
    ArticlesPreview,
    ArticlesAdd,
  },
  data() {
    return {
      articlesData: {},
      keyword: "",
      options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      status: "",
      pageSizes: [10, 20, 30, 40, 50],
      pageSize: 10,
      currentPage: 1,
      showDetailPreview: false,
      detailId: 0,
      showAddPreview: false,
      isEdit: false,
      articleData: {},
      isShowVideo: false,
      videoURL: "",
    };
  },
  mounted() {
    this.getArticlesData();
  },
  methods: {
    async getArticlesData() {
      try {
        const data = {
          page: this.currentPage,
          pagesize: this.pageSize,
        };
        this.status && (data.state = this.status);
        this.keyword && (data.keyword = this.keyword);
        const res = await list(data);
        this.articlesData = res.data;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async onChangeState(item) {
      const state = item.state === 0 ? 1 : 0;
      try {
        await changeState({
          id: item.id,
          state,
        });
        item.state = state;
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    onSearch() {
      this.currentPage = 1;
      this.getArticlesData();
    },
    onClear() {
      if (!this.keyword && !this.status) {
        return;
      }
      this.currentPage = 1;
      this.keyword = "";
      this.status = "";
      this.getArticlesData();
    },
    sizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.getArticlesData();
    },
    currentChange() {
      this.getArticlesData();
    },
    async onPreview(articleItem) {
      this.detailId = articleItem.id;
      this.showDetailPreview = true;
      await this.$nextTick();
      const articlePre = this.$refs.articlePre;
      if (articlePre) {
        articlePre.getDetailData();
      }
    },
    onDelete(item) {
      if (item.state) {
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await remove({ id: item.id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          if (this.articlesData.items.length === 1) {
            if (this.currentPage > 1) {
              this.currentPage--;
            }
          }
          await this.getArticlesData();
        })
        .catch(() => {});
    },
    onEdit(item) {
      if (item.state) {
        return;
      }
      this.isEdit = true;
      this.articleData = item;
      this.showAddPreview = true;
      const articleAdd = this.$refs.articleAdd;
      if (articleAdd) {
        this.$nextTick(() => {
          articleAdd.fillData();
        });
      }
    },
    refreshData() {
      this.currentPage = 1;
      this.keyword = "";
      this.status = "";
      this.getArticlesData();
    },
    createArticle() {
      this.showAddPreview = true;
    },
    handleClose(done) {
      this.$refs.articleAdd.clear();
      done();
    },
    async playVideo(videoURL) {
      this.isShowVideo = true;
      this.videoURL = videoURL;
      await this.$nextTick();
      this.$refs.video.play();
    },
    onCloseVideo() {
      this.isShowVideo = false;
      this.videoURL = "";
    },
  },
};
</script>

<style scoped lang='less'>
.articles-wrapper {
  padding: 10px;

  .box-card {
    display: flex;
    justify-content: space-between;

    .search-wrap {
      display: flex;
      align-items: center;

      .ipt-wrap {
        display: flex;
        align-items: center;

        .label {
          min-width: 70px;
          color: #606266;
          margin-right: 10px;
          font-size: 14px;
          font-weight: bold;
          text-align: right;
        }
      }
    }
  }

  .total {
    margin: 20px 0;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
  }

  .controls {
    user-select: none;
    span {
      color: #66b1ff;
      margin-right: 10px;
      cursor: pointer;

      &.disabled {
        color: #d2c9cc;
        cursor: not-allowed;
      }
    }
  }

  .film-icon {
    color: blue;
    font-size: 18px;
    cursor: pointer;
  }

  .video-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3000;

    .close-btn-wrap {
      display: flex;
      justify-content: center;
      margin: 100px 0 30px;

      .close-btn {
        width: 50px;
        height: 50px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        cursor: pointer;
      }
    }

    .video-wrap {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
